<template>
  <CommonQueryLayout class="role-control">
    <template #top>
      <QueryForm
        :form="queryFormBind"
        :form-item-list="queryFormList"
        :loading="isGetRoleListLoading"
        @query="getRoleList"
      />
    </template>
    <template #default>
      <TableTopControl
        title-text="角色列表"
        v-model:table-size="tableStateWrapper.tableSize"
        v-model:table-columns="tableStateWrapper.tableColumns"
        :loading="isGetRoleListLoading"
        @reload-data="getRoleList"
      >
        <Simbtn
          type="primary"
          @click="openAddDrawer"
          :loading="insertRoleLoading"
          text="创建角色"
          icon="solution-outlined"
        />
      </TableTopControl>
      <a-alert
        type="info"
        show-icon
        class="role-control__alert"
        v-if="tableStateWrapper.selectedRowKeys.length > 0"
      >
        <template #message>
          <div class="role-control__alert-message">
            <span
              >当前选中{{ tableStateWrapper.selectedRowKeys.length }}项</span
            >
            <a-popconfirm
              :title="`确定删除${tableStateWrapper.selectedRowKeys.length}项吗？`"
              ok-text="确认"
              cancel-text="取消"
              @confirm="delManyRole(tableStateWrapper.selectedRowKeys)"
            >
              <Simbtn
                type="primary"
                :loading="deleteRoleLoading"
                text="批量删除"
                danger
                size="small"
                icon="switcher-outlined"
              />
            </a-popconfirm>
          </div>
        </template>
      </a-alert>
      <a-table
        bordered
        :size="tableStateWrapper.tableSize"
        :columns="tableStateWrapper.tableColumns"
        :dataSource="tableStateWrapper.tableData"
        :loading="isGetRoleListLoading"
        :row-selection="rowSelection"
        rowKey="id"
      >
        <template #options="{ record }">
          <a-space>
            <!-- v-perm="BtnPerm.EDIT" -->
            <a-button
              size="small"
              type="primary"
              @click="openEditDrawer(record)"
              :loading="
                modifyRoleLoading ||
                updateRolePermLoading ||
                queryRolePermLoading
              "
              >编辑</a-button
            >
            <a-popconfirm
              title="确定删除吗？"
              ok-text="确认"
              cancel-text="取消"
              @confirm="delRole(record)"
            >
              <a-button
                size="small"
                danger
                type="primary"
                :loading="deleteRoleLoading"
                >删除</a-button
              >
            </a-popconfirm>
          </a-space>
        </template>
      </a-table>
    </template>
  </CommonQueryLayout>
  <ModifyRoleDrawer
    @close="onDrawerClose"
    @enter="onEnterDrawer"
    @tree-check="onTreeCheck"
    :drawerState="drawerState"
    :loading="insertRoleLoading || modifyRoleLoading || updateRolePermLoading"
  />
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
// import { BtnPerm } from './types'

import useSearchRole from './hooks/useSearchRole'
import useModifyRole from './hooks/useModifyRole'

import CommonQueryLayout from '@/layout/CommonQueryLayout.vue'
import { TableTopControl } from '@/components/TopControl'
import { QueryForm } from '@/components/Form'
import { Simbtn } from '@/components/Button'
import ModifyRoleDrawer from './components/ModifyRoleDrawer.vue'

const {
  tableStateWrapper,
  getRoleList,
  queryFormBind,
  queryFormList,
  isGetRoleListLoading,
  rowSelection,
} = useSearchRole()

const {
  drawerState,
  onDrawerClose,
  openAddDrawer,
  openEditDrawer,
  onEnterDrawer,
  delRole,
  deleteRoleLoading,
  insertRoleLoading,
  modifyRoleLoading,
  delManyRole,
  getAllPerm,
  onTreeCheck,
  updateRolePermLoading,
  queryRolePermLoading,
} = useModifyRole(getRoleList)

onMounted(async () => {
  await getRoleList()
  getAllPerm()
})
</script>

<style lang="scss" scoped>
@include b(role-control) {
  @include e(alert) {
    margin-bottom: 4px;
  }
  @include e(alert-message) {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
